<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="secured" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>

<secured:authorize ifAnyGranted="ROLE_ACTUALIZAR_USUARIO">
<head>
	
</head>
<body>
	<div class="contenedor grande">
		<form:form commandName="modeloCredenciales" action="usuarios.do" method="post" acceptCharset="UTF-8" autocomplete="off">
			<form:hidden path="accion" />
			<form:hidden path="paso" />
			<form:hidden path="id" />
			
			<form:errors cssClass="mensaje-error-campo" />
			
			<!-- NO EDITABLES -->
			<div class="campo horizontal">
	   			<form:label path="usuario"><spring:message code="etiqueta.usuario" text="Usuario" /></form:label>
				<form:input path="usuario" disabled="true" />
	   		</div>
	   		<div class="campo horizontal">
	   			<form:label path="apellido"><spring:message code="etiqueta.apellido" text="Apellido" /></form:label>
				<form:input path="apellido" disabled="true" />
	   		</div>
	   		<div class="campo horizontal">
	   			<form:label path="primerNombre"><spring:message code="etiqueta.primerNombre" text="Primer nombre" /></form:label>
				<form:input path="primerNombre" disabled="true" />
	   		</div>
	   		<div class="separador">
				&nbsp;
			</div>
	   		
	   		<!-- CAMBIO DE CREDENCIALES -->
			<h5><spring:message code="hint.reglasPassword" text="Por favor, tenga presente que su contraseña debe cumplir las siguientes condiciones:" /></h5>
			<ul>
				<li><spring:message code="regla.largo" text="Tener entre 8 y 20 caracteres." /></li>
				<li><spring:message code="regla.numero" text="Tener por lo menos un número (0-9)." /></li>
				<li><spring:message code="regla.minuscula" text="Tener por lo menos una letra minúscula (a-z)." /></li>
				<li><spring:message code="regla.mayuscula" text="Tener por lo menos una letra mayúscula (A-Z)." /></li>
				<li><spring:message code="regla.caracter" text="Tener por lo menos un caracter especial (`~!@#$%^&()-_=[{]}|&quot;;:',<.>/?)." /></li>
			</ul>
			
			<div class="campo horizontal">
	   			<form:label path="nueva"><spring:message code="etiqueta.nuevaPassword" text="Nueva contraseña" />
					<span class="requerido"><spring:message code="etiqueta.requerido" text="(Requerido)" /></span>
      			</form:label>
				
				<spring:message code="etiqueta.nuevaPassword" text="Nueva contraseña" var="placeholder" />
				<spring:message code="hint.nuevaPassword" text="Por favor, ingrese la que será su nueva contraseña." var="title" />
				<form:password path="nueva" maxlength="20" tabindex="1" placeholder="${placeholder}" title="${title}" autofocus="autofocus" />
				<form:errors cssClass="mensaje-error-campo" path="nueva" />
				
				<div class="progreso">
					<div class="barra"></div>
				</div>
				<div class="estado">
					<spring:message code="etiqueta.complejidad" text="Complejidad" />
					<span class="complejidad">0%</span>
				</div>
	   		</div>
	   		<div class="campo horizontal">
	   			<form:label path="confirmar"><spring:message code="etiqueta.confirmarPassword" text="Confirmar contraseña" />
					<span class="requerido"><spring:message code="etiqueta.requerido" text="(Requerido)" /></span>
      			</form:label>
				
				<spring:message code="etiqueta.confirmarPassword" text="Confirmar contraseña" var="placeholder" />
				<spring:message code="hint.confirmarPassword" text="Por favor, vuelva a ingresar la que será su nueva contraseña." var="title" />
				<form:password path="confirmar" maxlength="20" tabindex="2" placeholder="${placeholder}" title="${title}"  />
				<form:errors cssClass="mensaje-error-campo" path="confirmar" />
	   		</div>
	   		
	   		<div class="campo comentario horizontal">
      			<form:label path="comentarios"><spring:message code="etiqueta.comentarios" text="Comentarios" />
					<span class="requerido"><spring:message code="etiqueta.requerido" text="(Requerido)" /></span>
      			</form:label>
				
				<form:textarea path="comentarios" maxlength="500" tabindex="3" />
				<form:errors cssClass="mensaje-error-campo" path="comentarios" />
      		</div>
			<div class="separador">
				&nbsp;
			</div>
	   		
	   		<button type="submit" tabindex="4"><spring:message code="etiqueta.actualizar" text="Actualizar" /></button>
			<button type="button" tabindex="5" onclick="javascript:cancelar();"><spring:message code="etiqueta.cancelar" text="Cancelar" /></button>
		</form:form>
	</div>

	<!-- JAVASCRIPT -->
	<script type="text/javascript">
		jQuery(document).ready(function(){

			jQuery('#nueva').complexify({}, function (valid, complexity) {
	            if (!valid) {
	                $('.barra').css({'width':complexity + '%'}).removeClass('valida').addClass('invalida');
	            } else {
	                $('.barra').css({'width':complexity + '%'}).removeClass('invalida').addClass('valida');
	            }
	            $('.complejidad').html(Math.round(complexity) + '%');
	        });

			jQuery("form[id=modeloCredenciales]").validity(function() {
				//Requerido. Entre 8 y 20 caracteres (inclusive)
	        	jQuery("#nueva")
		        	.require('<spring:message code="mensaje.passwordRequerida" text="Por favor, ingrese la contraseña." />')
					.minLength(8)
					.maxLength(20);

	        	//Requerido. Entre 8 y 20 caracteres (inclusive)
	        	jQuery("#confirmar")
	        		.require('<spring:message code="mensaje.passwordNoConfirmada" text="Debe confirmar la contraseña." />')
		        	.minLength(8)
					.maxLength(20);	        	

	        	//Requerido. Entre 1 y 500 caracteres (inclusive)
	        	jQuery("#comentarios")
		        	.require('<spring:message code="mensaje.comentariosRequeridos" text="Debe ingresar un comentario de por qué se realiza el cambio." />')
					.maxLength(500);	        	

	        	jQuery("input[type='password']")
	            	.equal('<spring:message code="mensaje.passwordDiferentes" text="Los textos ingresados no coinciden." />');
        	});
        
		});
	</script>
</body>
</secured:authorize>